<template>
  <div :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
import { deviceFlow } from '@/api/homePage'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '385px'
    }
  },
  data() {
    return {
      name: [],
      series: [],
      data2: {
        echatX: [],
        flow: [],
        total: []
      }
    }
  },
  created() {
    this.doQuery()
  },
  mounted() {
    this.doQuery()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    doQuery() {
      deviceFlow().then(({ data: { data } }) => {
        // console.log(data)
        var d_arr_init = []
        data.forEach((item, index) => {
          // tyh: 当日流量
          this.data2.flow[index] = item.flow
          // tyh: 当日设备在线数
          this.data2.total[index] = item.online
          var d = new Date(item.createTime)
          var d_init =
            d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
          d_arr_init.push(d_init)
        })
        this.data2.echatX = d_arr_init
        this.initChart()
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(
        {
          title: {
            left: 'left',
            text: '设备流量/在线数'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: 70,
            bottom: 40,
            right: 60,
            left: 60
          },
          xAxis: {
            type: 'category',
            splitLine: { show: false },
            data: this.data2.echatX,
            axisPointer: {
              type: 'line'
            },
            axisLabel: {
              rotate: 8
            },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2'
              }
            }
          },
          // 设置两个y轴，左边显示数量，右边显示概率
          yAxis: [
            {
              splitLine: { show: false },
              type: 'value',
              name: '流量（M）',
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  color: '#2ec7c9'
                }
              },
              splitArea: { show: false } // 去除网格区域
            },

            // 右边显示概率
            {
              splitLine: { show: false },
              type: 'value',
              name: '在线数（个）',
              max: function(value) {
                return 1.5 * value.max
              },
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  color: '#b6a2de'
                  // width: 1 // 这里是为了突出显示加上的
                }
              },
              splitArea: { show: false } // 去除网格区域
            }
          ],

          // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
          series: [
            {
              name: '流量',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              showAllSymbol: true,
              data: this.data2.flow,
              areaStyle: {
                normal: {
                  // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(46,199,201,1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(104,235,237,0.2)'
                    }
                  ])
                }
              } // 区域颜色渐变
            },
            {
              // 折线
              name: '在线数',
              type: 'line',
              smooth: false,
              step: true,
              showAllSymbol: true,
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
              data: this.data2.total,
              itemStyle: {
                normal: {
                  color: '#DDA0DD',
                  lineStyle: {
                    // 系列级个性化折线样式
                    width: 2,
                    type: 'solid',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#DDA0DD'
                      },
                      {
                        offset: 1,
                        color: '#b6a2de'
                      }
                    ]) // 线条渐变色
                  }
                }
              }
              // areaStyle: {
              //   normal: {
              //     // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //       offset: 0,
              //       color: 'rgba(127,104,175,0.5)'
              //     }, {
              //       offset: 0.4,
              //       color: 'rgba(56,155,255,0.25)'
              //     }, {
              //       offset: 1,
              //       color: 'rgba(38,197,254,0.03)'
              //     }])
              //   }
              // }// 区域颜色渐变
            }
          ]
        },
        true
      )
    }
  }
}
</script>
